<template>
  <div class="video">
    <div class="content">

    </div>
    <div class="control">
      <div class="progress">
        <div class="line" :style="{ width: currentProgress + 'px' }"></div>
      </div>
      <div class="btns">
        <div class="left">
          <div>
            {{ fileName }}
          </div>
          <div>
            {{ `${currentTime} / ${durationTime}` }}
          </div>
          <div>
            <ul>
              <li>
                <span class="iconfont icon-prev"></span>
              </li>
              <li>
                <span class="iconfont icon-shangyishou1"></span>
              </li>
              <li>
                <span v-if="playing" class="iconfont icon-bofang2"></span>
                <span v-else class="iconfont icon-zanting"></span>
              </li>
              <li>
                <span class="iconfont icon-xiayishou1"></span>
              </li>
              <li>
                <span class="iconfont icon-xiayishoux"></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <div>
            <ul>
              <li>
                <span class="iconfont icon-shengyinyinliangmianxing"></span>
              </li>
              <li>
                <span class="iconfont icon-danquxunhuan2"></span>
              </li>
              <li>
                <span class="iconfont icon-liebiao"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';
import { queryData } from '@/apis/mysql';
import system from '@/utils/system';
const playing = ref(false)
const fileName = ref('')
const currentTime = ref('')
const durationTime = ref('')
const currentProgress = ref('')
const videoPath = ref('')
const files = ref([])
const fileIdx = ref(0)
const lists = ref([])
const listIdx = ref(0)

const fileUrl = computed(()=>{
  return videoPath.value + '/' + files.value[fileIdx.value] + lists.value[listIdx.value]
})

onMounted(()=>{
  getPath()
})

function getPath() {
  queryData({
    table: 'resources',
    data: {
      name: 'video'
    }
  }).then((res) => {
    let obj = res.data[0]
    videoPath.value = `${obj.disk}:/${obj.path}`
    localDir()
  })
}

function localDir() {
  system.readDir(videoPath.value).then(res => {
    files.value = res
    localClassify()
  })
}

function localClassify() {
  const list = []
  const dir = videoPath.value + '/' + files.value[fileIdx.value]
  system.readDir(dir).then(res => {
    res.map(x => {
      list.push({
        title: x,
        path: dir + '/' + x
      })
    })
    lists.value = list
    listIdx.value = 0
    startPlay()
  })
}

function play() {
  if (playing.value == false) {
    playing.value = true
    myVideo.value.play()
  } else {
    playing.value = false
    myVideo.value.pause()
  }
}
</script>
<style scoped lang="scss">
// .video{

// }</style>
